﻿@{
    ViewBag.Title = "Ryan Butler.org : ASP.NET MVC Contact Form";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<h1>Creating a <abbr title="Active Server Pages">ASP</abbr>.NET <abbr title="Model View Controller">MVC</abbr> Contact Form</h1>
<h3>Adding validation to our controller</h3>
<p>Adding client&#8212;side and server&#8212;side validation to an <abbr title="Model View Controller">MVC</abbr> form is easy. First, let’s add the following code
to our controller:</p>
<pre class="brush:csharp">
[HttpPost]
public ActionResult Contact(ContactModels c)
{
if (ModelState.IsValid)
{
}
return View();
}
</pre>
<p>As you can see from the code above, we:</p>
<ol>
<li>Annotate our method by using [HttpPost], which means we’re posting back to a server</li>
<li>Pass in our contact model class as a method parameter</li>
<li>In our method, we check our model state, using the model’s method call <span class="special">IsValid</span>:
<ol type="a">
<li>If it’s true, we’ll try and send the e&#8212;mail</li>
<li>If it’s false, we’ll re&#8212;display the form and appropriate error messages</li>
</ol>
</li>
</ol>
<p>Save your changes.</p>
<h3>Adding validation to our model</h3>
<p>In our model, we need to add the following name space:</p>
<pre class="brush:csharp highlight:[5]">
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.ComponentModel.DataAnnotations;
</pre>
<p>As you can see from the code above, we add <span class="special">System.ComponentModel.DataAnnotations</span>, which gives us
data annotations used in outputting error messages to our form using semantic <abbr title="Hypertext Markup Language">HTML</abbr> markup. Next, we
add the following annotations to our first name class variable:</p>
<pre class="brush:csharp highlight:[3]">
public class ContactModels
{
[Required(ErrorMessage="First Name is required")]
public string FirstName { get; set; }
public string LastName { get; set; }
public string Email { get; set; }
public string Comment { get; set; }
}
</pre>
<p>As you can see from the code above, we annotate our class variable with a required attribute followed by
an appropriate error message.</p>
<h3>Adding validation to our form</h3>
<p>In our razor web page, add the following:</p>
<p class="align"><a href="@Url.Content("~/content/aspmvcform/images/razor6.png")" data-lightbox="image-razor6"><img src="@Url.Content("~/content/aspmvcform/thumbs/razor6.png")" alt="Razor Syntax 6" width="265" height="59" /></a></p>
<p>As you can see from the code above, we:</p>
<ol>
<li>Add a validation summary at the beginning of the form and suppress the unordered list that would
be shown by passing in the Boolean true.</li>
<li>Add a validation message to our form field that will output the error message from our model
next to the field in error.</li>
</ol>
<p>Save your changes and preview the results in a web browser. When we initially load our form, it looks as
before. If we leave the form un&#8212;filled, and press the submit button, the following error message shows:</p>
<p class="align"><a href="@Url.Content("~/content/aspmvcform/images/16.png")" data-lightbox="image-16"><img src="@Url.Content("~/content/aspmvcform/thumbs/16.png")" alt="" width="250" height="143" /></a></p>
<p>If we take a look at the <abbr title="Hypertext Markup Language">HTML</abbr> markup of our razor web page, we see the following:</p>
<p class="align"><a href="@Url.Content("~/content/aspmvcform/images/17.png")" data-lightbox="image-17"><img src="@Url.Content("~/content/aspmvcform/thumbs/17.png")" alt="" width="250" height="29" /></a></p>
<p>As shown from the code example above we have:</p>
<ol>
<li>Validation summary suppressed or not visible</li>
<li>Error message from the model written in a span tag</li>
<li><abbr title="Cascading Style Sheets">CSS</abbr> class that is styled to show a distinct error message next to the field in question.</li>
</ol>
<p>One item to note is in our style sheet, if we look for field-validation&#8212;error, we’ll see existing <abbr title="Cascading Style Sheets">CSS</abbr> styles
applied to it. This is so we can change our error messaging styling if needed.</p>
<h3>Unobtrusive JavaScript</h3>
<p>It should be noted that <abbr title="Model View Controller">MVC</abbr> is providing unobtrusive JavaScript validation natively. Unobtrusive
JavaScript means we don’t have JavaScript from validation embedded in our razor page or HTML
markup having an explicit onclick event. Instead, we have a &lt;span&gt; class that is injected with the correct
<abbr title="Cascading Style Sheets">CSS</abbr> class used to style our error message in a clean, semantic output.</p>
<p>We can toggle this setting in our web.config located in the root of our solution, as shown below:</p>
<p class="align"><a href="@Url.Content("~/content/aspmvcform/images/22.png")" data-lightbox="image-22"><img src="@Url.Content("~/content/aspmvcform/thumbs/22.png")" alt="" width="266" height="53" /></a></p>
<p>Once finished, return to Visual Studio and stop debugging by pressing the stop button or by pressing Shift
+ F5. Also, close web.config if opened.</p>
<h3>Summarizing validation model in <abbr title="Model View Controller">MVC</abbr></h3>
<p>With our initial validation in place, let’s use the following illustration to clarify how validation is working
in the <abbr title="Model View Controller">MVC</abbr> paradigm:</p>
<p class="align"><a href="@Url.Content("~/content/aspmvcform/images/18.png")" data-lightbox="image-18"><img src="@Url.Content("~/content/aspmvcform/thumbs/18.png")" alt="" width="250" height="113" /></a></p>
<p>As you can see from the illustration, validation works in three steps:</p>
<ol>
<li>Visitor leaves required fields (first name) empty and presses submit button</li>
<li>Submit button calls our annotated <span class="special">HttpPost</span> method, which checks the state of our model to
determine if our form field is valid</li>
<li>During the model check, if no data is bound, our model sends our error message back to the
controller, which returns our initial view back to the screen, which gives us our error message.</li>
</ol>
<p>Before moving forward, finish out the rest of the validation, ensuring the remaining fields are required.
Use the existing solution file if you need guidance.</p>
<p>We'll continue by adding mail functionality to our controller @Html.ActionLink("next","Index5").</p>
<p><a href="#top">top of page</a></p>